<%--
  Created by IntelliJ IDEA.
  User: sunhao
  Date: 2015/9/29 0029
  Time: 下午 3:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>

<html>
<head>
    <title>课费管理</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%--<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">--%>
    <link href="/static/bui/css/bs3/dpl.css" rel="stylesheet" type="text/css"/>
    <link href="/static/bui/css/bs3/bui.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<div class="doc-content">
    <div class="panel">
        <div class="panel-header">
            <h3>课费信息</h3>
        </div>
        <div class="panel-body">
            <form id="searchForm" class="form-horizontal well" action="/cost/find" method="post">
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label">学生姓名：</label>

                        <div class="controls">
                            <select name="studentId" class="input-normal bui-form-field-select bui-form-field"
                                    aria-disabled="false" aria-pressed="false">
                                <option value="">请选择</option>
                                <c:forEach items="${students}" var="p">
                                    <option value="${p._id}">${p.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label">任课教师：</label>

                        <div class="controls">
                            <select name="teacherId" class="input-normal bui-form-field-select bui-form-field"
                                    aria-disabled="false" aria-pressed="false">
                                <option value="">请选择</option>
                                <c:forEach items="${teachers}" var="p">
                                    <option value="${p._id}">${p.name}</option>
                                </c:forEach>
                            </select>
                        </div>

                    </div>
                    <div class="control-group span8">
                        <label class="control-label">每节课费：</label>

                        <div class="controls">
                            <input type="text" class="control-text" name="pay">
                        </div>

                    </div>

                    <div class="control-group span8">
                        <label class="control-label">开始时间：</label>

                        <div class="controls">
                            <input type="text" class="calendar" name="startDate" style="width: auto"/>
                        </div>
                    </div>

                    <div class="control-group span8">
                        <label class="control-label">结束时间：</label>

                        <div class="controls">
                            <input type="text" class="calendar" name="endDate" style="width: auto"/>
                        </div>
                    </div>

                    <div class="span3 offset2">
                        <input value="搜索" type="submit" id="btnSearch" class="button button-primary"/>
                    </div>
                </div>
            </form>

            <form id="searchForm1" class="form-horizontal well" action="/cost/salary" method="post" autocomplete="on">
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label">任课教师：</label>

                        <div class="controls">
                            <select id="teacher" name="teacher"
                                    class="input-normal bui-form-field-select bui-form-field"
                                    aria-disabled="false" aria-pressed="false">
                                <option value="">请选择</option>
                                <c:forEach items="${teachers}" var="p">
                                    <option value="${p._id}">${p.name}</option>
                                </c:forEach>
                            </select>
                        </div>

                    </div>

                    <div class="control-group span8">
                        <label class="control-label">开始时间：</label>

                        <div class="controls">
                            <input id="startDate" type="text" class="calendar" name="startDate" style="width: auto"/>
                        </div>
                    </div>

                    <div class="control-group span8">
                        <label class="control-label">结束时间：</label>

                        <div class="controls">
                            <input id="endDate" type="text" class="calendar" name="endDate" style="width: auto"/>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="control-group span8" style="margin-left: 60px">
                        <h3>计算工资为&nbsp;&nbsp;${salary.pay}&nbsp;&nbsp;元</h3>
                    </div>
                    <div class="control-group span8">
                        <input id="salary" value="计算工资" type="submit" id="btnSearch1" class="button button-primary"/>
                    </div>
                    <%--<div class="control-group span8">--%>
                    <%--<button id="addSalary" class="button button-primary" style="margin-top: 10px">将工资信息添加到工资表</button>--%>
                    <%--</div>--%>
                </div>
            </form>


            <%--<div class="row">--%>
            <%--<div class="span22 offset3 control-row-auto" align="right">--%>
            <%--<h3>计算工资为&nbsp;&nbsp;${salary}&nbsp;&nbsp;元</h3>--%>
            <%--<span ><button id="addSalary" class="button button-primary" style="margin-top: 10px">添加到工资表</button></span>--%>
            <%--</div>--%>
            <%--</div>--%>

            <div class="row">
                <div class="span24 offset3 control-row-auto">
                    <div id="grid"></div>
                    <input type="hidden" name="lesson">
                </div>
            </div>


            <div id="content" class="hide">
                <form id="J_Form" class="form-horizontal bui-form-horizontal bui-form bui-form-field-container">
                    <div class="row" style="display: none">
                        <div class="control-group span8">
                            <label class="control-label"><s>*</s>id：</label>

                            <div class="controls">
                                <input name="_id" type="text" id="_id" class="input-normal control-text bui-form-field"
                                       aria-disabled="false" aria-pressed="false">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="control-group span8">
                            <label class="control-label"><s>*</s>学生姓名：</label>

                            <div class="controls">
                                <select id="student" name="student"
                                        class="input-normal bui-form-field-select bui-form-field"
                                        aria-disabled="false" aria-pressed="false">
                                    <option value="">请选择</option>
                                    <c:forEach items="${students}" var="p">
                                        <option name='${p.lessons}' value="${p._id}">${p.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="control-group span8">
                            <label class="control-label"><s>*</s>教师姓名：</label>

                            <div class="controls">
                                <select name="teacher" class="input-normal bui-form-field-select bui-form-field"
                                        aria-disabled="false" aria-pressed="false">
                                    <option value="">请选择</option>
                                    <c:forEach items="${teachers}" var="p">
                                        <option value="${p._id}">${p.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="control-group span8">
                            <label class="control-label"><s>*</s>课程名称：</label>

                            <div class="controls">
                                <select id="lesson" name="lesson"
                                        class="input-normal bui-form-field-select bui-form-field"
                                        aria-disabled="false" aria-pressed="false" onchange="changeLesson()">
                                    <option value="">请选择</option>
                                    <c:forEach items="${lessons}" var="p">
                                        <option value="${p._id}">${p.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="control-group span8">
                            <label class="control-label"><s>*</s>上课日期</label>

                            <div class="controls">
                                <p>
                                    <input type="text" class="calendar" name="date" style="width: auto"/>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="control-group span8">
                            <label class="control-label"><s>*</s>每节课费</label>

                            <div class="controls">
                                <input id="pay" name="pay" type="text" class="input-normal control-text">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <script type="text/javascript" src="/static/bui/js/jquery-1.8.1.min.js"></script>
            <script type="text/javascript" src="/static/bui/js/bui.js"></script>
            <script type="text/javascript" src="/static/bui/js/config.js"></script>
            <script type="text/javascript">

                function changeLesson() {
                    var lesson = $('#lesson').find("option:selected").attr("value")
                    console.log(lesson)
                    var pay = 0
                    <c:forEach items="${lessons}" var="p">
                    if ('${p._id}' == lesson) {
                        $('#pay').val(${p.price})
                    }
                    </c:forEach>
                }


                $('#addSalary').click(function () {
                    var teacher = '${salary.teacher}', startDate = '${salary.startDate}',
                            endDate = '${salary.endDate}', pay = '${salary.pay}'
                    $.ajax({
                        type: 'post',
                        url: '/salary/addSalary',
                        data: {teacher: teacher, startDate: startDate, endDate: endDate, pay: pay},
                        success: function (msg) {
                            if (msg == 'success') {
                                msg = "添加成功！";
                                BUI.Message.Alert(msg, function () {
                                    window.location.href = '/salary/list.do';
                                }, 'success')
                            } else {
                                msg = "添加失败";
                                BUI.Message.Alert(msg, function () {
                                    window.location.href = '/jsp/error/noAuthority.jsp';
                                }, 'error')
                            }
                        }
                    })
                })

                BUI.use('bui/calendar', function (Calendar) {
                    var datepicker = new Calendar.DatePicker({
                        trigger: '.calendar',
                        autoRender: true
                    });
                });

                BUI.use(['bui/grid', 'bui/data', 'bui/form'], function (Grid, Data, Form) {
                    var columns = [
                                {title: '上课时间', dataIndex: 'date', width: '20%'},
                                {title: '学生姓名', dataIndex: 'student', width: '17%'},
                                {title: '教师姓名', dataIndex: 'teacher', width: '17%'},
                                {title: '所学课程', dataIndex: 'lesson', width: '17%'},
                                {title: '每节课费（单位元）', dataIndex: 'pay', width: '20%'},
                                {
                                    title: '操作', renderer: function () {
                                    var editStr = '<span class="grid-command btn-edit"><i class="icon-edit"></i>编辑</span>'
                                    return editStr
                                }
                                }
                            ],
                    //默认的数据
                            data = [
                                <c:forEach items="${costs}" var="r">
                                {
                                    _id: '${r._id}',
                                    student: '${r.student}',
                                    teacher: '${r.teacher}',
                                    lesson: '${r.lesson}',
                                    date: '${r.date}',
                                    pay: '${r.pay}'
                                },
                                </c:forEach>
                            ],
                            store = new Data.Store({
                                data: data,
                                pageSize: 10
                            }),
                            editing = new Grid.Plugins.DialogEditing({
                                contentId: 'content',
                                triggerCls: 'btn-edit',
                                editor: {
                                    focusable: false,
                                    success: function () {
                                        var editType = editing.get('editType'),
                                                edtor = this,
                                                form = edtor.get("form");
                                        form.valid();
                                        if (form.isValid()) {
                                            this.close();
                                            if (editType == 'add') {
                                                $.ajax({
                                                    type: 'post',
                                                    url: '/cost/addCost',
                                                    data: $("#J_Form").serialize(),
                                                    success: function (msg) {
                                                        if (msg == 'success') {
                                                            msg = "添加成功！";
                                                            BUI.Message.Alert(msg, function () {
                                                                window.location.href = '/cost/list.do';
                                                            }, 'success')
                                                        } else {
                                                            msg = "添加失败";
                                                            BUI.Message.Alert(msg, function () {
                                                                window.location.href = '/jsp/error/noAuthority.jsp';
                                                            }, 'error')
                                                        }

                                                    }
                                                })
                                            } else {
                                                $.ajax({
                                                    type: 'post',
                                                    url: '/cost/updateCost',
                                                    data: $("#J_Form").serialize(),
                                                    success: function (msg) {
                                                        if (msg == 'success') {
                                                            msg = '修改成功！';
                                                            BUI.Message.Alert(msg, function () {
                                                                window.location.href = '/cost/list.do';
                                                            }, 'success')
                                                        } else {
                                                            msg = '修改失败';
                                                            BUI.Message.Alert(msg, function () {
                                                                window.location.href = '/jsp/error/noAuthority.jsp';
                                                            }, 'error')
                                                        }
                                                    }
                                                })
                                            }
                                        }
                                    }
                                }
                            }),
                            grid = new Grid.Grid({
                                render: '#grid',
                                columns: columns,
                                width: '100%',
//                    forceFit: true,
                                plugins: [Grid.Plugins.AutoFit],
                                store: store,
                                bbar: {
                                    pagingBar: true,
                                    elCls: 'image-pbar'
                                },
                                plugins: [Grid.Plugins.CheckSelection, editing],
                                tbar: {
                                    items: [{
                                        btnCls: 'button button-small',
                                        text: '<i class="icon-plus"></i>添加',
                                        listeners: {
                                            'click': addFunction
                                        }
                                    },
                                        {
                                            btnCls: 'button button-small',
                                            text: '<i class="icon-remove"></i>删除',
                                            listeners: {
                                                'click': delFunction
                                            }
                                        }
//                                        ,
//                                        {
//                                            btnCls: 'button button-small',
//                                            text: '<i class="icon-plus"></i>导出表格',
//                                            listeners: {
//                                                'click': exportFunction
//                                            }
//                                        }
                                    ]
                                }
                            });
                    grid.render();


                    function addFunction() {
                        var newData = {};
                        editing.add(newData); //添加记录后，直接编辑
                    }

                    function delFunction() {
                        var selections = grid.getSelection();
                        delItems(selections);
                    }

                    function delItems(items) {
                        var _ids = [];
                        BUI.each(items, function (item) {
                            _ids.push(item._id)
                        });
                        if (_ids.length) {
                            BUI.Message.Confirm('确认要删除吗？', function () {
                                $.ajax({
                                    type: 'POST',
                                    url: '/cost/delCost?_ids=' + _ids,
                                    success: function (msg) {
                                        if (msg == 'success') {
                                            msg = "删除成功！";
                                            BUI.Message.Alert(msg, function () {
                                                window.location.href = '/cost/list.do';
                                            }, 'success')
                                        } else {
                                            msg = '删除失败'
                                            BUI.Message.Alert(msg, function () {
                                                window.location.href = '/jsp/error/noAuthority.jsp';
                                            }, 'error')
                                        }
                                    }
                                })
                            })
                        }
                    };
                    var form = new Form.HForm({
                        srcNode: '#J_Form'
                    });
                });
            </script>
        </div>
    </div>
</div>
</body>
</html>
